<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <span class="secondtitle">用户审核</span>

        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">

        <el-input placeholder="请输入被审核者姓名" style="left: 300px;position: relative;width: 200px;">
        </el-input>
        <el-button icon="el-icon-search" type="primary" style="left: 300px;position: relative;">搜索</el-button>
        <br><br>

        <el-row class="ep_info">

          <el-table v-loading="loading" :data="UncheckData" style="width: 600px;left: 300px;position: relative;">
            <!--            <el-table-column label="公司名称" >-->
            <!--              <template slot-scope="scope">-->
            <!--                <span class="col-cont" v-html="showDate(scope.row.id)" ></span>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column  label="注册者id" width="130px">
              <template slot-scope="scope">
                <span style="left: 30px;position: relative" class="col-cont" v-html="showDate(scope.row.staff_id)" ></span>
              </template>
            </el-table-column>
            <el-table-column  label="注册者姓名">
              <template slot-scope="scope">
                <span style="left: 30px;position: relative" class="col-cont" v-html="showDate(scope.row.staff.name)" ></span>
              </template>
            </el-table-column>
            <el-table-column  label="操作" width="300px">
              <template slot-scope="scope">
                <el-button style="left: 50px;position: relative" type="success"  @click="passCheck(scope.row)" >通过</el-button>
                <el-button style="left: 50px;position: relative" type="warning"  @click="UnpassCheck(scope.row)" >不通过</el-button>
              </template>

            </el-table-column>
          </el-table>

        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {getAllUncheckData,passCheckData,NotpassCheckData} from "../../../../service/past/userInfCheck";
export default {
  data(){
    return{
      loading:true,
      UncheckData:[],
      ckeckedData:{
        staff_id:'',
        ispass:1
      },
      search:''
    }
  },
  mounted() {
    this.getUncheckData()
  },
  computed: {
    // 实时监听表格
    tables: function() {
      const search = this.search
      if (search) {
        return this.UncheckData.filter(dataNews => {
          return Object.keys(dataNews).some(key => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.UncheckData
    }
  },
  methods: {
    // 筛选变色
    showDate(val) {
      val = val + '';
      if (val.indexOf(this.search) !== -1 && this.search !== '') {
        return val.replace(this.search, '<span style="color: red; ">' + this.search + '</span>')
      } else {
        return val
      }
    },
    getUncheckData(){
      getAllUncheckData().then((res)=>{
        this.UncheckData=res.data.staffs
        this.loading=false
        console.log(this.UncheckData)
      }).catch(err=>{
        return this.$message.error(err.message)
      })
    },
    passCheck(value){
      this.ckeckedData.staff_id=value.staff_id
      this.ckeckedData.ispass=1
      passCheckData(this.ckeckedData).then((res)=>{
        this.loading=true
        getAllUncheckData().then((res)=>{
          this.UncheckData=res.data.staffs
          this.loading=false
          console.log(this.UncheckData)
        }).catch(err=>{
          return this.$message.error(err.message)
        })
      }).catch((err)=>{

      })
    },
    UnpassCheck(value){
      this.ckeckedData.staff_id=value.staff_id
      this.ckeckedData.ispass=0
      NotpassCheckData(this.ckeckedData).then((res)=>{
        this.loading=true
        getAllUncheckData().then((res)=>{
          this.UncheckData=res.data.staffs
          this.loading=false
          console.log(this.UncheckData)
        }).catch(err=>{
          return this.$message.error(err.message)
        })
      }).catch((err)=>{

      })
    }
  }
}
</script>

<style>
th.el-table_1_column_3.is-leaf{;
  text-align: center;
}
</style>
